<template>
  <Transition name="slide-fade">
    <div v-if="visible"
         class="message"
         :class="[type, position]"
         :style="{ top: offset + 'px' }">
      <component
        :is="getIcon"
        :size="18"
        weight="fill"
        class="message-icon"
      />
      <span class="message-content">{{ content }}</span>
    </div>
  </Transition>
</template>


<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import {
  PhCheckCircle,    // 成功
  PhWarning,        // 警告
  PhInfo,           // 信息
  PhX,              // 错误
} from '@phosphor-icons/vue';

const props = defineProps<{
  id: string
  type: 'success' | 'warning' | 'info' | 'error'
  content: string
  duration?: number
  offset?: number
  position?: 'top' | 'bottom'
  onClose?: () => void
}>();

const visible = ref(false);

// 图标映射
const getIcon = computed(() => {
  const icons = {
    success: PhCheckCircle,
    warning: PhWarning,
    info: PhInfo,
    error: PhX
  };
  return icons[props.type];
});

// 显示消息
onMounted(() => {
  visible.value = true;
  if (props.duration !== 0) {
    setTimeout(() => {
      visible.value = false;
      setTimeout(() => {
        props.onClose?.();
      }, 300); // 等待动画结束
    }, props.duration || 3000);
  }
});
</script>

<style scoped lang="less">
.message {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  max-width: 420px;
  width: auto;

  &.top {
    top: 20px;
  }

  &.bottom {
    bottom: 20px;
  }

  .message-icon {
    margin-right: 8px;
    flex-shrink: 0;
  }

  .message-content {
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2937;
  }

  // 类型样式
  &.success {
    background: #f8fafc;
    .message-icon { color: #10b981; }
  }

  &.warning {
    background: #f8fafc;
    .message-icon { color: #f59e0b; }
  }

  &.info {
    background: #f8fafc;
    .message-icon { color: #3b82f6; }
  }

  &.error {
    background: #f8fafc;
    .message-icon { color: #ef4444; }
  }

  &:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }
}

// 动画
.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.15s ease-in;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translate(-50%, -8px);
  opacity: 0;
}

// 深色模式
@media (prefers-color-scheme: dark) {
  .message {
    background: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    .message-content {
      color: #e5e7eb;
    }

    &:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }

    &.success,
    &.warning,
    &.info,
    &.error {
      background: #1e293b;
    }
  }
}
</style>
